<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Mesh Statistics</title>
    <link rel="stylesheet" href="light.css" />
  </head>
  <body>
    <noscript>
      <strong
        >niivue doesn't work properly without JavaScript enabled. Please enable
        it to continue.</strong
      >
    </noscript>
    <header>
      <label for="curveSlider">Curvature</label>
      <input
        type="range"
        min="0"
        max="10"
        value="7"
        class="slider"
        id="curveSlider"
      />
      <label for="threshSlider">Threshold</label>
      <input
        type="range"
        min="1"
        max="20"
        value="90"
        class="slider"
        id="threshSlider"
      />
      <label for="rangeSlider">Range</label>
      <input
        type="range"
        min="1"
        max="90"
        value="30"
        class="slider"
        id="rangeSlider"
      />
      <label for="opacitySlider">Opacity</label>
      <input
        type="range"
        min="0"
        max="10"
        value="7"
        class="slider"
        id="opacitySlider"
      />
      <label for="negativeCheck">&nbsp;&nbsp; NegativeColors</label>
      <input type="checkbox" id="negativeCheck" checked />
      <label for="divergeCheck">Diverging Colors</label>
      <input type="checkbox" id="divergeCheck" unchecked />
      <label for="darkCheck">Dark</label>
      <input type="checkbox" id="darkCheck" checked />
      <select id="colormapTypeDrop">
        <option selected>restrict colorbar to range</option>
        <option>colorbar from 0,transparent subthreshold</option>
        <option>colorbar from 0, translucent subthreshold</option>
      </select>
      <select id="outlineDrop">
        <option value="0" selected>no outline</option>
        <option value="1" >opaque outline</option>
        <option value="-1">black outline</option>
      </select>
      <select id="colorDrop">
        <option selected>white</option>
        <option>red</option>
        <option>green</option>
        <option>blue</option>
      </select>
    </header>
    <main id="container">
      <canvas id="gl1"></canvas>
    </main>
    <footer>
      <label id="shaderBtns">Shaders: </label>
    </footer>
  </body>
</html>
<script type="module" async>
  import * as niivue from "../dist/index.js"
  curveSlider.onchange = function () {
    nv1.setMeshLayerProperty(nv1.meshes[0].id, 0, "opacity", this.value * 0.1)
  }
  document.getElementById("threshSlider").addEventListener("change", doThreshChange)
  document.getElementById("rangeSlider").addEventListener("change", doThreshChange)
  function doThreshChange() {
    let mn = document.getElementById("threshSlider").value * 0.1
    let mx = mn + (document.getElementById("rangeSlider").value * 0.1)
    nv1.setMeshLayerProperty(nv1.meshes[0].id, 1, "cal_min", mn)
    nv1.setMeshLayerProperty(nv1.meshes[0].id, 1, "cal_max", mx)
  }
  colorDrop.onchange = function () {
    const index = this.selectedIndex
    let rgb = [255, 255, 255]
    if (index === 1) {
      rgb = [255, 32, 32]
    } else if (index === 2) {
      rgb = [0, 222, 32]
    } else if (index === 3) {
      rgb = [92, 128, 255]
    }
    nv1.setMeshProperty(nv1.meshes[0].id, "rgba255", [
      rgb[0],
      rgb[1],
      rgb[2],
      255,
    ])
  }
  darkCheck.onchange = function () {
    let v = 1
    if (this.checked)
        v = 0
    nv1.opts.backColor = [v, v, v]
    nv1.drawScene()
  }
  divergeCheck.onchange = function () {
    if (!this.checked) {
        nv1.setMeshLayerProperty(nv1.meshes[0].id, 1, "colormap", "warm")
        nv1.setMeshLayerProperty(nv1.meshes[0].id, 1, "colormapNegative", "winter")
    } else {
        nv1.setMeshLayerProperty(nv1.meshes[0].id, 1, "colormap", "green2orange")
        nv1.setMeshLayerProperty(nv1.meshes[0].id, 1, "colormapNegative", "green2cyan")
    }
  }
  opacitySlider.onchange = function () {
    nv1.setMeshLayerProperty(nv1.meshes[0].id, 1, "opacity", this.value * 0.1) 
  }
  colormapTypeDrop.onchange = function () {
     nv1.setMeshLayerProperty(nv1.meshes[0].id, 1, "colormapType", this.selectedIndex) 
  }
  negativeCheck.onchange = function () {
    nv1.setMeshLayerProperty(nv1.meshes[0].id, 1, "useNegativeCmap", this.checked)
    nv1.refreshColormaps()
    console.log(nv1.meshes[0].layers[1].useNegativeCmap)
  }
  outlineDrop.onchange = function () {
        nv1.setMeshLayerProperty(nv1.meshes[0].id, 1, "outlineBorder", parseInt(this.value)) 
  }
  var nv1 = new niivue.Niivue({
    show3Dcrosshair: true,
    backColor: [0.3, 0.3, 0.3, 1],
  })
  let shaders = nv1.meshShaderNames();
  for (let i = 0; i < shaders.length; i++) {
    let btn = document.createElement("button");
    btn.innerHTML = shaders[i];
    btn.onclick = function () {
      nv1.setMeshShader(nv1.meshes[0].id, shaders[i]);
    };
    shaderBtns.appendChild(btn);
  }
  nv1.setSliceType(nv1.sliceTypeRender)
  await nv1.attachTo("gl1")
  nv1.opts.isColorbar = true
  var meshLHLayersList1 = [
    {
      url: "../images/BrainMesh_ICBM152.lh.curv",
      colormap: "gray",
      cal_min: 0.3,
      cal_max: 0.5,
      opacity: 0.7,
    },
    {
      url: "../images/BrainMesh_ICBM152.lh.motor.mz3",
      cal_min: 1.5,
      cal_max: 5,
      colormap: "warm",
      colormapNegative: "winter",
      useNegativeCmap: true,
      opacity: 0.7,
    },
  ]
  await nv1.loadMeshes([
    { url: "../images/BrainMesh_ICBM152.lh.mz3", layers: meshLHLayersList1 },
  ])
  nv1.setMeshLayerProperty(nv1.meshes[0].id, 0, "colorbarVisible", false)
  doThreshChange()
  divergeCheck.onchange()
  colormapTypeDrop.onchange()
</script>
